import { useState, useEffect } from 'react';
import { Row, Col, Table, Card } from 'antd';
import {
    EditOutlined,
    UserOutlined,
    MoreOutlined,
    PlusCircleOutlined,
} from '@ant-design/icons';

import './index.css';
import roleApi from '../../api/role';

export default () => {
    const [roleList, setRoleList] = useState([
        { id: 1, name: '管理员' },
        { id: 2, name: '普通用户' },
    ]);

    const [currentRoleId, setCurrentRoleId] = useState(1);

    useEffect(() => {
        getRoleList();
    }, []);

    const getRoleList = async () => {
        const res = await roleApi.getList();
        console.log('res', res);
    };

    const columns = [
        {
            title: '姓名',
            dataIndex: 'nickname',
        },
        {
            title: '电子邮箱',
            dataIndex: 'email',
        },
        {
            title: '所属部门',
            dataIndex: 'dept',
        },
        {
            title: '管理范围',
            render: () => '全部',
        },
        {
            title: '操作',
            render: () => <EditOutlined />,
        },
    ];

    const dataSource = [
        {
            nickname: '绅士刘先生',
            email: '12312@qq.com',
            dept: '技术部',
        },
    ];

    return (
        <div className="role-page">
            <Row gutter={10}>
                <Col span={6}>
                    <Card className="left-card">
                        {roleList.map((item) => {
                            return (
                                <Row
                                    key={item.id}
                                    justify="space-between"
                                    align="middle"
                                    className={`list-item ${
                                        currentRoleId === item.id
                                            ? 'active'
                                            : ''
                                    }`}
                                    onClick={() => setCurrentRoleId(item.id)}
                                >
                                    <div>
                                        <UserOutlined />
                                        <span>{item.name}</span>
                                    </div>
                                    <MoreOutlined />
                                </Row>
                            );
                        })}

                        <PlusCircleOutlined className="add-role" />
                    </Card>
                </Col>
                <Col span={18}>
                    <Card>
                        <Table
                            dataSource={dataSource}
                            columns={columns}
                            rowKey={(record) => record.id}
                        />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};
